<template>
	<view>
		<image :src="details.img"></image>
		<view>
			<view class="jvli">
				<p v-if="isLon">你当前距离{{details.name}}有{{dis}}km</p>
				<uni-fav :checked="hasFav" @click="favObj" bg-color="#CCC" bg-color-checked="red"></uni-fav>
				<button style="width: fit-content;" @tap="setLine" v-if="isLon">到这去</button>
			</view>
		</view>
		<view class="content">{{details.intro}}</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		CONFIG
	} from "../../utils/config"
	import {
		userStore
	} from '../../store/userStrore'
	const store = userStore()
	import {
		getMapDistance
	} from "../../utils/tools.js"
	onLoad(async (data) => {
		getDetails(data.id)
		if(store.isLogin){
			await getByuIdAndiId(store.userInfo.id, data.id)
		}	
	})
	let details = ref({})
	let dis = ref()
	let isLon = ref(false)
	let hasFav = ref(false)
	async function getDetails(id) {
		let res = await uni.$get(CONFIG.leanbase + "/1.1/classes/senicitem/" + id)
		console.log(res)
		details.value = res.data
		if (details.value.lon !== undefined && details.value.lon !== null) {
			isLon.value = true;
		} else {
			isLon.value = false;
		}
		// console.log(details.value.lon, details.value.lat)
		dis.value = getMapDistance(details.value.lat, details.value.lon, store.currentPos.latitude, store.currentPos
			.longitude)
	}

	function setLine() {
		uni.navigateTo({
			url: `/pages/playWebView/playWebView?slat=${store.currentPos.latitude}
			&slon=${store.currentPos.longitude}
			&elat=${details.value.lat}
			&elon=${details.value.lon}
			&name=${details.value.name}`
		})
	}

	async function getByuIdAndiId(uid, oid) {
		let query = {
			userId: uid,
			itemId: oid
			// userId: store.userInfo.id,
			// itemId: details.value.objectId
		}
		let qStr = JSON.stringify(query)
		let res = await uni.$get(CONFIG.leanbase + `/1.1/classes/favItem`, {
			where: qStr
		})
		console.log(res)
		if (res.data.results.length == 0) {
			hasFav.value = false
			return false
		} else {
			hasFav.value = true
			return true
		}
	}


	async function favObj() {
		if (!store.isLogin) {
			uni.showToast({
				title: "请先登录！",
				icon: "error"
			})
			return
		}
		if (!await getByuIdAndiId(store.userInfo.id, details.value.objectId)) {
			let a = {
				userId: store.userInfo.id,
				itemImg: details.value.img,
				itemName: details.value.name,
				itemId: details.value.objectId
			}
			let res2 = await uni.$post(CONFIG.leanbase + '/1.1/classes/favItem', a)
			console.log(res2)
			if (res2.statusCode == 201) {
				hasFav.value = true
			} else {
				uni.showToast({
					title: "收藏失败",
					icon: "fail"
				})
			}
		} else {
			let query2 = {
				userId: store.userInfo.id,
				itemId: details.value.objectId
			}
			let qStr2 = JSON.stringify(query2)
			let res3 = await uni.$get(CONFIG.leanbase + `/1.1/classes/favItem`, {
				where: qStr2
			})
			console.log(res3)
			await uni.$del(CONFIG.leanbase + `/1.1/classes/favItem/${res3.data.results[0].objectId}`)
			hasFav.value = false
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 100%;
	}

	.jvli {
		width: fit-content;
		margin: 0px auto;
		display: flex;
		justify-content: center;
		align-items: center;

		p {
			width: 200px;
			text-align: center;
		}
	}

	.jvli>* {
		padding: 5px;
	}

	.content {
		background-color: #f0f0f2;
		padding: 10px;
		line-height: 1.6;
		text-indent: 2em;
	}

	button {
		text-align: center;
		font-size: 10px;
		margin: 5px;
	}
</style>